<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片滚屏效果 </title>
<link href="miaov_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.onload=function(){
  var oDiv= document.getElementById("roll");
  var oA1=document.getElementsByTagName("a")[0];
  var oA2=document.getElementsByTagName("a")[1];
  var oUl=document.getElementsByTagName("ul")[0];
  var oLi=document.getElementsByTagName("li");
  var speed = 5;
  var item=0;

 //将图片赋值一份
  oUl.innerHTML+=oUl.innerHTML;
  //获的设置样式的长度
 oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";
  oA1.onmouseover=function(){
    speed=-5;
  }
  oA2.onmouseover=function(){
    speed=5;
  }
  //
item=setInterval( function(){
    oUl.style.left=oUl.offsetLeft+speed+"px";
    console.log(oUl.offsetLeft);
    console.log(oUl.offsetWidth/2)
  if(oUl.offsetLeft<-oUl.offsetWidth/2){
   oUl.style.left=0+"px";
  }
  if(oUl.offsetLeft>0){
   oUl.style.left=-oUl.offsetWidth/2+"px";
  }
  },30);

  oUl.onmouseover=function(){
    clearInterval(item);
   }
   var i =0 ;
   oUl.onmouseout=function(){
    i++;
     item=setInterval( function(){
  console.log(oUl.style.left)
  console.log(oUl.offsetLeft)

  oUl.style.left=oUl.offsetLeft+speed+"px";
  if(oUl.offsetLeft<-oUl.offsetWidth/2){
   oUl.style.left=0+"px";
  }
  if(oUl.offsetLeft>0){
   oUl.style.left=-oUl.offsetWidth/2+"px";
  }
  },30);

   }




  
 
} 
</script>
</head>
<body>


<div class="roll" id="roll">
    <a href="javascript:void(0);" class="btn_left"></a>
    <a href="javascript:void(0);" class="btn_right"></a>
    <div class="wrap">
        <ul>
            <li><img src="images/1.jpg" /></a></li>
            <li><img src="images/2.jpg" /></a></li>
            <li><img src="images/3.jpg" /></a></li>
            <li><img src="images/4.jpg" /></a></li>
        </ul>
    </div>
</div>
</body>
</html>